<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>艺库教育B端管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link href="/favicon.ico" rel="icon" type="image/x-icon"/>

    <!--<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">-->
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">

    <link rel="stylesheet" href="/art/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/art/css/login.css" media="all">


    <script type="text/javascript" src="/art/layuiadmin/layui/layui.js"></script>
    <script type="text/javascript" src="/static/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="/static/layer/2.4/layer.js"></script>
    <script type="text/javascript" src="/static/laypage/1.2/laypage.js"></script>
    <script type="text/javascript" src="/static/laydate5.3/laydate.js"></script>

    <!--- 自定义函数 --->
    <script type="text/javascript" src="/static/crypto-js-4.2.0/crypto-js.js"></script>
    <script type="text/javascript" src="/static/function.js"></script>
    <script type="text/javascript" src="/static/crypto_func.js"></script>

    <link rel="stylesheet" href="/art/css/login.css" media="all">
</head>
<body>

<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login">

    <div class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header">
            <image src="/art/logo.png" class="img"/>
            <h2><strong>艺库教育</strong></h2>
        </div>

        <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
            <div class="layui-form-item">
                <img src="/art/mine_0.png" class="img"/>
                <input type="text" id="mobile" placeholder="请输入手机号" class="layui-input" maxlength="11"
                       onkeyup="this.value=this.value.replace(/\D/g,'')" value="15123456781">
            </div>
            <div class="layui-form-item">
                <img src="/art/mine_1.png" class="img"/>
                <input type="password" id="password" placeholder="请输入密码" class="layui-input" value="123456">
            </div>

            <div class="layui-row">
                <div class="layui-col-xs7 layui-form-item">
                    <img src="/art/mine_2.png" class="img"/>
                    <input type="text" id="captcha" placeholder="请输入验证码" class="layui-input">
                </div>
                <div class="layui-col-xs5">
                    <div style="margin: 10px 0 0 16px;">
                        <img src="/bend/account/code?name=organ_code&t={{LARAVEL_TIME}}"
                             class="layadmin-user-login-codeimg"
                             onclick="this.src='/bend/account/code?name=organ_code&t='+Math.random();">
                    </div>
                </div>
            </div>


            <button class="layui-btn layui-btn-fluid" id="to-login">登 入</button>


            <!-- <button type="button" id="button">点击展示阿里验证码</button> -->
            <button type="button" id="captcha-element" style="display: none;">阿里验证码展示</button>

        </div>
    </div>

</div>


<script>
    $(document).ready(function (e) {
        let encodeConfig = {!! json_encode($encodeConfig) !!};

        $("#to-login555555555555").on("click", function () {
            var mobile = $("#mobile").val();
            var password = $("#password").val();
            var captcha = $("#captcha").val();
            if (mobile == "" || password == "") {
                layer.msg('请填写手机号或密码！');
                return false;
            }

            let data = {"mobile": mobile, "password": password, "captcha": captcha}

            // 执行Ajax
            // 加密Ajax请求
            enAjax('/bend/account/on-login', encodeConfig, data,
                function (ret) {
                    console.log(ret)
                    console.log(ret.msg)
                    if (ret.code === 200) {
                        layer.msg(ret.msg, {icon: 6, time: 2000});
                        setTimeout(function () {
                            window.top.location.href = "{{url('/bend/home/index')}}";
                        }, 2000);
                    } else {
                        layer.msg(ret.msg, {icon: 5, time: 2000});
                        // 刷新验证码
                        $('.layadmin-user-login-codeimg').attr('src', '/bend/account/code?name=organ_code&t=' + Math.random());
                    }
                }
            )

            // 直接Ajax请求
            /*onAjax('/bend/account/on-login', data,
                function (ret) {
                    console.log(ret)
                    console.log(ret.msg)
                    layer.msg(ret.msg, {icon: 6, time: 2000});
                    if (ret.code == 200) {
                        setTimeout(function () {
                            window.top.location.href = "{{url('/bend/home/index')}}";
                        }, 2000);
                    }
                }
            )*/


        });
    });

</script>


<!---  阿里云验证码 --->
<!---  https://help.aliyun.com/zh/captcha/captcha2-0/user-guide/add-a-web-or-html5-client-to-alibaba-cloud-captcha-2?spm=a2c4g.11186623.0.0.181b48c04Ipzop#f2338fd1ee9w6 --->
<script type="text/javascript" src="https://o.alicdn.com/captcha-frontend/aliyunCaptcha/AliyunCaptcha.js"></script>
<script>
    let captcha;
    // 弹出式
    initAliyunCaptcha({
        SceneId: 'qonabfwj', // 场景ID。根据步骤二新建验证场景后，您可以在验证码场景列表，获取该场景的场景ID
        prefix: '1gjpyj', // 身份标。开通阿里云验证码2.0后，您可以在控制台概览页面的实例基本信息卡片区域，获取身份标
        mode: 'popup', // 验证码模式。popup表示要集成的验证码模式为弹出式。无需修改
        element: '#captcha-element', //页面上预留的渲染验证码的元素，与原代码中预留的页面元素保持一致。
        button: '#to-login', // 触发验证码弹窗的元素。button表示单击登录按钮后，触发captchaVerifyCallback函数。您可以根据实际使用的元素修改element的值
        captchaVerifyCallback: captchaVerifyCallback, // 业务请求(带验证码校验)回调函数，无需修改
        onBizResultCallback: onBizResultCallback, // 业务请求结果回调函数，无需修改
        getInstance: getInstance, // 绑定验证码实例函数，无需修改
        slideStyle: {
            width: 360,
            height: 40,
        }, // 滑块验证码样式，支持自定义宽度和高度，单位为px。其中，width最小值为320 px
        language: 'cn', // 验证码语言类型，支持简体中文（cn）、繁体中文（tw）、英文（en）
        region: 'cn' //验证码示例所属地区，支持中国内地（cn）、新加坡（sgp）
    });

    // 绑定验证码实例函数。该函数为固定写法，无需修改
    function getInstance(instance) {
        captcha = instance;
    }

    // 业务请求(带验证码校验)回调函数
    /**
     * @name captchaVerifyCallback
     * @function
     * 请求参数：由验证码脚本回调的验证参数，不需要做任何处理，直接传给服务端即可
     * @params {string} captchaVerifyParam
     * 返回参数：字段名固定，captchaResult为必选；如无业务验证场景时，bizResult为可选
     * @returns captchaResult: boolean, bizResult?: boolean|undefined
     */
    async function captchaVerifyCallback(captchaVerifyParam) {

        // captchaVerifyParam = JSON.parse(captchaVerifyParam)
        // console.log(captchaVerifyParam)

        // 1.向后端发起业务请求，获取验证码验证结果和业务结果
        /*const result = await xxxx('http://您的业务请求地址', {
            captchaVerifyParam: captchaVerifyParam, // 验证码参数
            yourBizParam... // 业务参数
        });

        // 2.构造标准返回参数
        const verifyResult = {
            captchaResult: result.captchaVerifyResult, // 验证码验证是否通过，boolean类型，必选
            bizResult: '从result获取您的业务验证结果', // 业务验证是否通过，boolean类型，可选；若为无业务验证结果的场景，bizResult可以为空
        };
        return verifyResult;*/

        let captchaVerifyParamJson = JSON.parse(captchaVerifyParam)
        console.log(captchaVerifyParamJson);

        /*const result = await async_ajax('/bend/account/ali-captcha', {captchaVerifyParam: captchaVerifyParam,});
        console.log('=====',result);*/

        /*const result = await $.ajax('/bend/account/ali-captcha', {
            captchaVerifyParam: captchaVerifyParam, // 验证码参数
        });*/

        return {
            captchaResult: true,
            bizResult: true,
        }
    }

    // 业务请求验证结果回调函数
    function onBizResultCallback(bizResult) {
        console.log(bizResult)

        let encodeConfig = {!! json_encode($encodeConfig) !!};
        if (bizResult === true) {
            // 如果业务验证通过，跳转到对应页面。此处以跳转到https://www.aliyun.com/页面为例
            // window.location.href = 'https://www.aliyun.com/';
            var mobile = $("#mobile").val();
            var password = $("#password").val();
            var captcha = $("#captcha").val();
            if (mobile == "" || password == "") {
                layer.msg('请填写手机号或密码！');
                return false;
            }

            let data = {"mobile": mobile, "password": password, "captcha": captcha}

            // 执行Ajax
            // 加密Ajax请求
            enAjax('/bend/account/on-login', encodeConfig, data,
                function (ret) {
                    console.log(ret)
                    console.log(ret.msg)
                    if (ret.code === 200) {
                        layer.msg(ret.msg, {icon: 6, time: 2000});
                        setTimeout(function () {
                            window.top.location.href = "{{url('/bend/home/index')}}";
                        }, 2000);
                    } else {
                        layer.msg(ret.msg, {icon: 5, time: 2000});
                        // 刷新验证码
                        $('.layadmin-user-login-codeimg').attr('src', '/bend/account/code?name=organ_code&t=' + Math.random());
                    }
                }
            )

        } else {
            // 如果业务验证不通过，给出不通过提示。此处不通过提示为业务验证不通过！
            alert('业务验证不通过！');
        }
    }

    // 执行异步操作
    function async_ajax(url, data) {
        return new Promise((resolve, reject) => {
            $.ajax({
                type: "POST",
                url,
                data: data,
                dataType: "json",
                headers: {U4TIRP87hGoJhcyM: 'mZwTzXgOawVV1GJJ'},
                success(data) {
                    resolve(data);
                },
                error(data) {
                    reject(data);
                }
            })
        })
    }
</script>


</body>
</html>
